<template>
  <div class="card">
    <el-row :gutter="10">
      <el-col :span="6">
        <el-card>
          <card-item title="总销售额" :count="`￥${this.$parent.list.salesTotal}`">
            <template slot="charts">
              <span class="span">
                <span style="margin-right: 10px">周同比</span>
                {{ this.$parent.list.salesGrowthLastMonth }}
                <svg t="1646382875404" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3749" width="16" height="16"><path d="M951.1626 819.412438 72.8374 819.412438 511.999488 204.586538Z" p-id="3750" fill="#d81e06" /></svg></span>
              <span>
                <span style="margin-right: 10px">日同比</span>
                {{ this.$parent.list.salesGrowthLastDay }}
                <svg t="1646383060381" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3986" width="16" height="16"><path d="M511.999488 819.413462 72.8374 204.586538 951.1626 204.586538Z" p-id="3987" fill="#1afa29" /></svg>
              </span>
            </template>
            <template slot="footer">
              <span>日销售额 ￥12423</span>
            </template>
          </card-item>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <card-item title="访问量" :count="this.$parent.list.visitToday">
            <template slot="charts">
              <line-charts />
            </template>
            <template slot="footer">
              <span>日访问量 1234</span>
            </template>
          </card-item>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <card-item title="支付笔数" :count="this.$parent.list.payTotal">
            <template slot="charts">
              <bar-charts />
            </template>
            <template slot="footer">
              <span>转化率 65%</span>
            </template>
          </card-item>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <card-item title="运营活动效果" count="78%">
            <template slot="charts">
              <progress-charts/>
            </template>
            <template slot="footer">
              <span class="span">周同比&nbsp;&emsp;&emsp;22% <svg t="1646382875404" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3749" width="16" height="16"><path d="M951.1626 819.412438 72.8374 819.412438 511.999488 204.586538Z" p-id="3750" fill="#d81e06" /></svg></span>
              <span>日同比&nbsp;&nbsp;&nbsp; 15%<svg t="1646383060381" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3986" width="16" height="16"><path d="M511.999488 819.413462 72.8374 204.586538 951.1626 204.586538Z" p-id="3987" fill="#1afa29" /></svg></span>
            </template>
          </card-item>
        </el-card>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import CardItem from '@/views/dashboard/card/CardItem'
import LineCharts from '@/views/dashboard/card/LineCharts'
import BarCharts from '@/views/dashboard/card/BarCharts'
import ProgressCharts from '@/views/dashboard/card/ProgressCharts'

export default {
  name: 'Card',
  components: {ProgressCharts, BarCharts, LineCharts, CardItem }
}
</script>

<style scoped>
  .span {
    margin-right: 20px;
  }
</style>
